<template>
  <div class="personnel">
    <div class="personnel-box" v-for="(item, index) in videoData" :key="index">
      <div class="personnel-box-left">
        <p>{{ item.functionTypeName }}</p>
        <p>
          <span>{{ item.deviceName }}</span>
        </p>
      </div>
      <div class="personnel-box-right" @click="playVideo(item)">
        <img src="../../../../../assets/images/cockpit/home/leader-monitor.png" />
      </div>
    </div>
    <play-video :videoUrl="videoUrl" ref="chidrenVideo"></play-video>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cockpit from '@/api/cockpit'
import playVideo from '@/components/Global/FlvVideo'
export default {
  name: 'monitoring',
  components: {
    playVideo
  },
  data() {
    return {
      videoData: [],
      show: false,
      videoUrl: '',
      baseUrl: ''
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  mounted() {
    this.abnormal()
  },
  methods: {
    // 周边视频
    abnormal() {
      Cockpit.Online.around({ regionCode: this.user.regionCode }).then(res => {
        const data = { ...res.data.data }
        this.videoData = data.video
      })
    },
    playVideo(item) {
      console.log(item)
      // const hostname = document.location.hostname === 'localhost' ? '188.188.33.26' : document.location.origin
      // const url = `${hostname}${this.$config.flvUrl}${item.deviceCode}.flv?access-token=${this.user.token}`
      this.videoUrl = 'http://191.191.190.13:81/smart/stream/51450.flv?access-token=C279B60305204123'
      // this.videoUrl = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
      this.$refs.chidrenVideo.popupShow = true
    },
    handleClosed() {
      this.popupShow = false
    }
  }
}
</script>

<style scoped lang="less">
.personnel {
  &-box {
    margin: 0 32px 16px 32px;
    height: 152px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p:nth-child(1) {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
      padding: 16px 0 15px 32px;
    }
    p:nth-child(2) {
      padding-left: 32px;
      span:first-child {
        font-size: 28px;
        color: rgba(0, 0, 0, 0.78);
        padding-right: 80px;
      }
      span:last-child {
        font-size: 28px;
        color: rgba(0, 0, 0, 0.78);
      }
    }

    &-right {
      margin-right: 32px;
      .van-icon {
        font-size: 40px;
        color: rgba(60, 189, 208, 0.3);
        border-radius: 50%;
      }
    }
  }
  &-box:first-child {
    margin-top: 16px;
  }
}
.van-popup.van-popup--center.van-popup--safe-area-inset-bottom {
  height: 50% !important;
}
</style>
